<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<p>userId：<input id="userId" name="userId" type="text" value="10"></p>
<p>msg：<input id="contentText" name="contentText" type="text" value="hello websocket"></p>

<p>for:<input id="for" name="for" type="text" value="11"></p>

<p>操作：<button onclick="openSocket()">开启socket</button></p>
<p>操作：<button onclick="sendMessageFor()">发送消息</button></p>
<p>操作：<button onclick="sendMessageForMore()">多用户发送消息</button></p>
<h1>内容如下</h1>
<p id="json-display"></p>
</body>
<script type="application/javascript">

    let socket;
    function openSocket() {
        if(socket != null){
            socket.close();
            socket = null;
        }
        let userId = document.getElementById('userId').value
        socket = new WebSocket("ws://localhost:8408/myService/"+userId);
        //打开事件
        socket.onopen = function() {
            console.log("websocket已打开");
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
        };
        //关闭事件
        socket.onclose = function() {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("websocket发生了错误");
        }
    }
    function sendMessage() {
        let contentText = document.getElementById('contentText').value
        socket.send(contentText);
    }
    function sendMessageFor() {
        let userId = document.getElementById("userId").value
        let contentText = document.getElementById('contentText').value
        let forId = document.getElementById('for').value

        const websocketUser = {
            userId : userId,
            foruserId: forId,
            mailMessage: contentText
            // Assuming 'massage' is the correct property name in your WebSocketUser class
        };

        $.ajax({
            method: 'POST',
            url: 'http://localhost:8408/mail/sendForUser', // Adjust the URL according to your actual endpoint
            contentType: 'application/json',
            data: JSON.stringify(websocketUser),
            success: function(response) {
                const prettyJsonString = JSON.stringify(response, null, 2);
                const jsonDisplayElement = document.getElementById('json-display');
                jsonDisplayElement.innerHTML = '<pre>' + prettyJsonString + '</pre>';
            },
            error: function(xhr, status, error) {
                alert('Error sending message: ' + error);
            }
        });
    }
    function sendMessageForMore(){
        let userId = document.getElementById("userId").value
        let contentText = document.getElementById('contentText').value
        let forId = document.getElementById('for').value
        const websocketUser = {
            userId : userId,
            foruserId: forId,
            mailMessage: contentText, // Assuming 'massage' is the correct property name in your WebSocketUser class
            groupId: 1 //本处group_Id 替换为学生组的id，或者新建一个小组的ID
        };
        $.ajax({
            method: 'POST',
            url: 'http://localhost:8408/mail/sendForUserList', // Adjust the URL according to your actual endpoint
            contentType: 'application/json',
            data: JSON.stringify(websocketUser),
            success: function(response) {
                const prettyJsonString = JSON.stringify(response, null, 2);
                const jsonDisplayElement = document.getElementById('json-display');
                jsonDisplayElement.innerHTML = '<pre>' + prettyJsonString + '</pre>';
            },
            error: function(xhr, status, error) {
                alert('Error sending message: ' + error);
            }
        });
    }

</script>
</html>